<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="learn javascript by www.liaoxuefeng.com">
    <title>表单-双向绑定</title>
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <script src="/static/js/jquery-3.1.0.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/vue-2.5.16.js"></script>
    <script>

        $(function () {
            var vm = new Vue({
                el: '#vm',
                data: {
                    email: '',
                    password: '',
                    birth: '',
                    gender: 's',
                    language: ['zh'],
                    city: 'bj',
                    introduction: '',
                    subscribe: true
                },
                methods: {
                    register: function () {
                        $('#modal-data').text(JSON.stringify(this.$data, null, '    '));
                        $('#modal').modal();
                        // TODO: post JSON data to server...
                    }
                }
            });
            window.vm = vm;
        });

        function executeJs() {
            try {
                var code = $('#code').val();
                var fn = new Function('var vm = window.vm;\n' + code);
                fn();
            } catch (e) {}
            return false;
        }

    </script>
</head>

<body>
<div class="modal" id="modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">Handle Register Form</h4>
            </div>
            <div class="modal-body">
                <p>Post JSON data:</p>
                <pre id="modal-data"></pre>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<header class="navbar navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <a href="/" class="navbar-brand">Learn JavaScript</a>
        </div>
        <nav class="collapse navbar-collapse" id="bs-navbar">
            <ul class="nav navbar-nav">
                <li><a target="_blank" href="http://www.liaoxuefeng.com/">Get Courses</a></li>
                <li><a target="_blank" href="https://github.com/michaelliao/learn-javascript">Source Code</a></li>
                <li><a target="_blank" href="http://getbootstrap.com/">Resource</a></li>
            </ul>
        </nav>
    </div>
</header>
<div id="important" style="color:#cdbfe3; background-color:#6f5499; padding:30px 0; margin:-20px 0 20px 0;">
    <div class="container">
        <h1 style="color:#fff; font-size:60px">表单-双向绑定</h1>
        <p style="font-size:24px; line-height:48px">Learn JavaScript, Node.js, npm, koa2, Vue, babel, etc. at liaoxuefeng.com.</p>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><span class="glyphicon glyphicon-th-list"></span> MVVM</h3>
                </div>
                <div class="panel-body">
                    <div id="vm">
                        <h3>Register Vue Course</h3>
                        <form name="register" action="#" v-on:submit.prevent="register">
                            <div class="form-group">
                                <label>Email address:</label>
                                <input type="email" v-model="email" class="form-control" placeholder="Enter email">
                            </div>
                            <div class="form-group">
                                <label>Password:</label>
                                <input type="password" v-model="password" class="form-control" placeholder="Password">
                            </div>
                            <div class="form-group">
                                <label>Birth:</label>
                                <input type="date" v-model="birth" class="form-control" placeholder="Birth">
                            </div>
                            <div class="form-group">
                                <label>Gender:</label>
                                <div class="radio">
                                    <label><input type="radio" name="gender" value="m" v-model="gender"> Male</label>
                                </div>
                                <div class="radio">
                                    <label><input type="radio" name="gender" value="f" v-model="gender"> Female</label>
                                </div>
                                <div class="radio">
                                    <label><input type="radio" name="gender" value="s" v-model="gender"> Keep Secret</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Language:</label>
                                <div>
                                    <label class="checkbox-inline"><input type="checkbox" v-model="language" value="zh"> Chinese</label>
                                    <label class="checkbox-inline"><input type="checkbox" v-model="language" value="en"> English</label>
                                    <label class="checkbox-inline"><input type="checkbox" v-model="language" value="fr"> French</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>City:</label>
                                <select v-model="city" class="form-control">
                                    <option value="bj">Beijing</option>
                                    <option value="sh">Shanghai</option>
                                    <option value="gz">Guangzhou</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Introduce Yourself:</label>
                                <textarea v-model="introduction" class="form-control" rows="3" style="resize: none;" placeholder="Your background, interests, etc."></textarea>
                            </div>
                            <div class="form-group">
                                <label>Subscribe:</label>
                                <div>
                                    <label class="checkbox-inline"><input type="checkbox" v-model="subscribe"> Send me information of new courses</label>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">Register</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><span class="glyphicon glyphicon-eye-open"></span> Model</h3>
                </div>
                <div class="panel-body">
                    <h3>Try change the model</h3>
                    <form action="#" onsubmit="return executeJs()">
                        <div class="form-group">
                                <textarea id="code" class="form-control" style="font-family: Menlo,Monaco,Consolas,'Courier New',monospace; resize:none;" rows="5">vm.email = 'bob@example.com';
vm.birth = '1990-01-21';
vm.gender = 'f';
vm.language = ['en','zh'];
vm.city = 'sh';
</textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Execute</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <h1>Get more courses...</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">JavaScript</h3>
                </div>
                <div class="panel-body">
                    <p>full-stack JavaScript course</p>
                    <p><a target="_blank" href="http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000">Read more</a></p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Python</h3>
                </div>
                <div class="panel-body">
                    <p>the latest Python course</p>
                    <p><a target="_blank" href="http://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000">Read more</a></p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">git</h3>
                </div>
                <div class="panel-body">
                    <p>A course about git version control</p>
                    <p><a target="_blank" href="http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000">Read more</a></p>
                </div>
            </div>
        </div>
    </div>
</div>

<footer style="background-color:#ddd; padding: 20px 0;">
    <div class="container">
        <p>
            <a target="_blank" href="http://www.liaoxuefeng.com">Website</a> -
            <a target="_blank" href="https://github.com/michaelliao/learn-javascript">GitHub</a> -
            <a target="_blank" href="http://weibo.com/liaoxuefeng">Weibo</a>
        </p>
        <p>This JavaScript course is created by <a target="_blank" href="http://weibo.com/liaoxuefeng">@廖雪峰</a>.</p>
        <p>Code licensed <a target="_blank" href="https://github.com/michaelliao/learn-javascript/blob/master/LICENSE">Apache</a>.</p>
    </div>
</footer>
</body>

</html>